<template>
  <div class="caseAnalysis1">
    <div class="caseAnalysis1_top">案件办理流程</div>
    <div class="caseAnalysis1_buttom">
      <div class="content" v-for="(item, i) in contentArr" :key="i">
        <div class="contentLeft">{{ item.time }}</div>
        <div class="contentCenter">
          <div class="num">{{ i + 1 }}</div>
          <div class="img"><img src="../../assets/dapin/3/xian2.png" alt="" /></div>
        </div>
        <div class="contentRight">
          <div>{{ item.currentSteps }}</div>
          <div>办理人：{{ item.handler }}</div>
          <div>受理单位：{{ item.handlingUnit }}</div>
          <div class="processStatus">
            流程状态：<span>{{ item.processStatus }}</span>
          </div>
          <div class="other">{{ item.other }}</div>
        </div>
      </div>
      <div class="line"><img src="../../assets/dapin/3/2222.png" alt="" /></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contentArr: [
        {
          time: "2021-6-20 10:30:20",
          currentSteps: "受理登记",
          handler: "iu",
          handlingUnit: "一中队",
          processStatus: "登记完成",
          other: "案件来源登记表",
        },
        {
          time: "2021-6-18 10:30:20",
          currentSteps: "核查派遣",
          handler: "管理员",
          handlingUnit: "行政综合执法局",
          processStatus: "已指派",
        },
        {
          time: "2021-6-20 10:30:20",
          currentSteps: "核查指派案件证据",
          handler: "综执管理员",
          handlingUnit: "三中队",
          processStatus: "现场证据拍摄",
          other: "案件证据",
        },
        {
          time: "2021-6-20 10:30:20",
          currentSteps: "立案",
          handler: "综执管理员",
          handlingUnit: "三中队",
          processStatus: "已立案",
        },
         {
          time: "2021-6-20 10:30:20",
          currentSteps: "立案",
          handler: "综执管理员",
          handlingUnit: "三中队",
          processStatus: "已立案",
        },
         {
          time: "2021-6-20 10:30:20",
          currentSteps: "立案",
          handler: "综执管理员",
          handlingUnit: "三中队",
          processStatus: "已立案",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
}
.caseAnalysis1 {
  margin-top: 20px;
  color: #fff;
  width: 700px;
  padding-top: 20px;
  background: url("../../assets/dapin/2/xian.png") #0e1525 no-repeat;
  .caseAnalysis1_top {
  }
  .caseAnalysis1_buttom {
    justify-content: space-between;
    display: flex;
    width: 700px;
    padding-top: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    .content {
      color: #fff;
      width: 48%;
      display: flex;
      font-size: 14px;
      .contentLeft {
        width: 30%;
        text-align: right;
      }
      .contentCenter {
        display: flex;
        flex-direction: column;
        width: 26px;
        justify-content: center;
        align-items: center;
        margin: 0 15px;
        .num {
          width: 26px;
          height: 26px;
          background: #4d545e;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          margin-bottom: 2px;
        }
        .img{
          height: 120px;
          overflow: hidden;
        }
      }
      .contentRight {
        div{
          margin-bottom: 10px;
        }
        .processStatus {
          span {
            color: #73eaf8;
          }
        }
        .other {
          color: #73eaf8;
          text-decoration: underline;
        }
      }
    }
    .line{
      position: absolute;
      left: 50%;
    }
  }
}
</style>